<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>设置li标签的透明图</title>
	<script src="js/jquery-3.4.1.min.js"></script>
    <style>
        *{margin: 0; padding: 0;}

        .wrap{
            width: 685px;
            margin: 20px auto;
            padding: 15px;
            padding-top: 0;
            border: 1px solid #3b7;
        }
        ul, li{
            list-style: none;
            font-size: 0
        }
        li{
            display: inline-block;
            width: 160px;
            height: 160px;
            margin: 15px 15px 0 0; 
            opacity: .4;
        }
        li:nth-child(4n){
            margin-right: 0
        }
        li > a > img{
            width: 100%;
        }
    </style>
	<script>
		$(function(){
			$('.wrap li').mouseenter(function(){
				$(this).css('opacity',1).siblings().css('opacity',.4)
			})
		})
	</script>
</head>
<body>    
    <section class="wrap">
        <ul>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
            <li><a href="#"><img src="images/wine.jpg" /></a></li>
        </ul>
    </section>

</body>
</html>